<template>
    <div>

         <h1>房号更新</h1>
        <a href="/">返回</a>
        <table class="table">
            <tbody>
                <tr>
                    <td>编号</td>
                    <td>{{ data.id }}</td>
                    
                </tr>
                <tr>
                    <td>房号</td>
                    <td><input type="text" v-model="data.houseNum"></td>
                </tr>
                <tr>
                    <td>状态</td>
                    <td>
                       <select v-model="data.stateHouse">
            <option value="0">请选择状态</option>
             <option v-for="e in statexlk"  :value="e.id">{{ e.stateName }}</option>
        </select>
                    </td>
                </tr>
                <tr>
                    <td>手机号</td>
                    <td>
                        <input type="text" v-model="data.userPhone">
                    </td>
                </tr>
                <tr>
                    <td>房型</td>
                    <td>
                       <select v-model="data.typeid">
            <option  value="0">请选择房型</option>
            <option v-for="e in typexlk"  :value="e.id">{{ e.typeName }}</option>
        </select>
                    </td>
                </tr>
                <tr>
                    <td>联系人姓名</td>
                    <td>
                        <input type="text" v-model="data.userName">
                    </td>
                </tr>
                <tr>
                    <td>联系人头像</td>
                    <td>
                        <input type="file" @change="urlhouse">
                        <img :src="'https://localhost:7083/'+data.userImg" style="height: 60px; width: 60px;">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="button" value="更新" @click="add">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios' 
import { useRouter,useRoute } from 'vue-router';

const router=useRouter();
const route=useRoute();

const getid=()=>{
    var vid =route.query.id;
    axios.get("https://localhost:7083/api/HouseNum/Getid",{params:{id:vid}}).then(res=>{
        data.value=res.data;
    })
}

onMounted(()=>{
    getid();
    TypeXLKS();
    StateXLKS(); 
})
//上传
const urlhouse=(e:any)=>{
   var f = e.target.files[0];
   var fs =new FormData();

   fs.append("file",f);
   
   axios.post("https://localhost:7083/api/ImgHouse",fs).then(res=>{
     data.value.userImg=res.data
   })

}

//类型下拉框
const typexlk = ref([{
    "id": 1,
    "typeName": "标准间"
}])
const TypeXLKS=()=>{
 axios.get("https://localhost:7083/api/HouseType").then(res=>[
    typexlk.value=res.data
 ])
}

const statexlk = ref([{
     "id": 1,
    "stateName": "空闲"
}])
const StateXLKS=()=>{
 axios.get("https://localhost:7083/api/StateHouse").then(res=>[
    statexlk.value=res.data
 ])
}

const data=ref({
  "id": 0,
  "houseNum": "",
  "stateHouse": 0,
  "isDelete": true,
  "houseDate": "2025-05-12T12:30:44.356Z",
  "userPhone": "",
  "userName": "",
  "typeid": 0,
  "userImg": ""
})

const add=()=>{
    axios.put("https://localhost:7083/api/HouseNum/UpdateHouse",data.value).then(res=>{
        if(res.data>0)
    {
        alert("更新成功");
router.push({path:'/'})
    }
     else if(res.data==-1)
     {
          alert("房号名称重复");
          return;
     }
     else{
        alert("更新失败");
        return;
     }
    })
}


</script>

<style scoped>

</style>    